<template>
	<view>
		<tui-bottom-popup :show="show" @close="close">
			<tui-list-cell :hover="false">
				<view class="tui-pay-item__title">
					<view>请选择支付方式</view>
					<view>
						支付金额：
						<text class="tui-pay-amuont">￥{{ payMoney }}</text>
					</view>
				</view>
			</tui-list-cell>
			<radio-group @change="handleChange">
				<!-- 				<tui-list-cell v-if="useRemain" unlined :hover="false">
					<label class="tui-pay-item">
						<image src="/static/images/mall/pay/icon_pay_balance.png" class="tui-pay-logo"></image>
						<text v-if="userInfo.balanceValue >= payMoney">余额支付（余额{{ userInfo.balanceValue }}）</text>
						<text v-else>余额支付（余额0，余额不足）</text>
						<view class="tui-radio" v-if="userInfo.balanceValue >= payMoney"><radio color="#5677fc" value="balance"></radio></view>
						<view v-else class="tui-recharge">去充值</view>
					</label>
				</tui-list-cell> -->
				<tui-list-cell unlined>
					<label class="tui-pay-item">
						<image src="/static/images/mall/pay/icon_pay_weixin.png" class="tui-pay-logo"></image>
						<text>微信支付</text>
						<view class="tui-radio"><radio checked color="#5677fc" value="weixin"></radio></view>
					</label>
				</tui-list-cell>
				<tui-list-cell unlined>
					<label class="tui-pay-item">
						<image src="/static/images/mall/pay/icon_pay_zhifubao.png" class="tui-pay-logo"></image>
						<text>支付宝支付</text>
						<view class="tui-radio"><radio color="#5677fc" value="alipay"></radio></view>
					</label>
				</tui-list-cell>
			</radio-group>
			<view class="tui-btn-pay">
				<tui-button height="88rpx" :loading="loading" :disabled="loading" type="primary" shape="circle" shadow @click="btnPay">去付款</tui-button>
			</view>
		</tui-bottom-popup>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { orderAlipay, wechatPay } from '@/service/order.js';
export default {
	name: 'tPayWay',
	props: {
		//控制显示
		show: {
			type: Boolean,
			default: false
		},
		id: {
			type: String,
			default: ''
		},
		page: {
			type: Number,
			default: 1
		},
		useRemain: {
			type: Boolean,
			default: false
		},
		payMoney: {
			type: Number | String,
			default: 0
		}
	},

	data() {
		return {
			payType: 'weixin',
			loading: false
		};
	},
	methods: {
		close() {
			this.$emit('close', {});
		},
		handleChange({ detail: { value } }) {
			this.payType = value;
		},
		async btnPay() {
			if (this.id) {
				if (this.payType == 'alipay') {
					try {
						uni.showLoading();
						this.loading = true;
						const orderDetail = await orderAlipay({ orderId: this.id });
						this.$emit('close', {});
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: orderDetail.body,
							success: e => {
								uni.redirectTo({
									url: '/pages/shop/success/success?id=' + this.id
								});
							},
							fail: e => {
								this.$emit('fail');
							}
						});
					} finally {
						this.loading = false;
						uni.hideLoading();
					}
				} else {
					try {
						uni.showLoading();
						this.loading = true;
						const orderDetail = await wechatPay({ orderId: this.id });
						this.$emit('close', {});
						uni.requestPayment({
							provider: 'wxpay',
							orderInfo: orderDetail,
							success: e => {
								uni.redirectTo({
									url: '/pages/shop/success/success?id=' + this.id
								});
							},
							fail: e => {
								console.log(e);
								this.$emit('fail');
							}
						});
					} finally {
						this.loading = false;
						uni.hideLoading();
					}
				}
			} else {
				this.$msg('系统出错~');
			}
		}
	}
};
</script>

<style scoped>
.tui-pay-item__title {
	width: 100%;
	height: 90rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20rpx;
	box-sizing: border-box;
	font-size: 28rpx;
}

.tui-pay-amuont {
	color: #eb0909;
	font-weight: 500;
	font-size: 34rpx;
}

.tui-pay-item {
	width: 100%;
	height: 80rpx;
	display: flex;
	align-items: center;
	padding: 0 20rpx;
	box-sizing: border-box;
	font-size: 28rpx;
}

.tui-pay-logo {
	width: 48rpx;
	height: 48rpx;
	margin-right: 15rpx;
}

.tui-radio {
	margin-left: auto;
	transform: scale(0.8);
	transform-origin: 100% center;
}

.tui-btn-pay {
	width: 100%;
	padding: 68rpx 35rpx 50rpx 35rpx;
	box-sizing: border-box;
}

.tui-recharge {
	color: #fc872d;
	margin-left: auto;
	padding: 12rpx 0;
}
</style>
